<!-- 订单列表： yx -->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>订单分页</title>
		<link href="/chat/css/order-pag.css" rel="stylesheet" type="text/css"/>
		<link rel="stylesheet" href="/chat/css/rmodal-no-bootstrap.css" type="text/css" />
		<link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css">
		<script type="text/javascript" src="/chat/js/rmodal.js"></script>
		<link href="/chat/css/rmodal-no-bootstrap.css"/>
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="/chat/lib/js/jquery.htools.select.js"></script>
		<link rel="stylesheet" href="/chat/css/mall.css" type="text/css" />
		<link rel="stylesheet" type="text/css" href="/chat/lib/css/htools.select.skin.css?v=1.0">
	</head>
	<body>
		<!-- <div id="top-box">
			<h2>&nbsp;&nbsp;&nbsp;我的订单</h2>
		</div>
		<div id="go-back">
			<img src="img/退出.png" >退出
		</div> -->
		<div id="child_header" style="height: 45px;width: 100%">
                <div class="goback"><a href="/chat/personcenter"><i></i></a></div>
                <div class="current_location"><span>我的钱包</span></div>
        </div>
        
		<div id="classify">
			<div class="classify-box" onclick="stateShow(0)">
				<div class="classify-number">
					[[${OrderTypeCount.allOrder}]]
				</div>
				全部
			</div>
			<div class="classify-box" onclick="stateShow(3)">
				<div class="classify-number">
					[[${OrderTypeCount.obligation}]]
				</div>
				待付款
			</div>
			<div class="classify-box" onclick="stateShow(4)">
				<div class="classify-number">
					[[${OrderTypeCount.noComment}]]
				</div>
				待评论
			</div>
			<div class="classify-box" onclick="stateShow(6)">
				<div class="classify-number">
					[[${OrderTypeCount.okOrder}]]
				</div>
				已完成
			</div>
			<div class="classify-box" onclick="stateShow(1)">
				<div class="classify-number">
					[[${OrderTypeCount.cancel}]]
				</div>
				取消
			</div>
		</div>
		
		<div id="contents">
		<div id="pag" th:each="mes:${orderShow}">
			<div id="pag-head" th:text="${mes.courseName}"
				th:onclick="'javascript:detail(\''+${mes.orderId}+'\');'">
			</div>
			<img src="img/右箭头.png" >
			<div th:if="${role} eq '1'">
				<div id="pag-type" th:switch="${mes.orderState}">
					<p th:case="'0'">已下单</p>
					<p th:case="'1'">已取消</p>
					<p th:case="'2'">正在授课中...</p>
					<p th:case="'3'">待付款...</p>
					<p th:case="'4'">待评论...</p>
					<p th:case="'6'">已完成</p>
				</div>
			</div>
			<div th:if="${role} eq '2'">
				<div id="pag-type" th:switch="${mes.orderState}">
					<p th:case="'0'">已下单</p>
					<p th:case="'1'">已取消</p>
					<p th:case="'2'">正在授课中...</p>
					<p th:case="'3'">等待学员付款...</p>
					<p th:case="'5'">待评论...</p>
					<p th:case="'6'">已完成</p>
				</div>
			</div>
			<div id="cut-off"></div>
			<div id="portrait">
				<div id="toux-box">
					<img src="img/YOGAlogo.jpg" th:src="@{./{filename}(filename=${mes.userHeadimg})}" >
				</div>
				<div id="portrait-box">
					项目名称:[[${mes.courseName}]]
				</div>
				<div id="portrait-box">
					学习时间:[[${mes.courseTime}]]
				</div>
				<div id="portrait-box">
					[[${mes.orderMoney}]] 软妹币
				</div>
			</div>
			<div th:if="${role} eq '1'">
				<div id="butt" th:switch="${mes.orderState}">
					<div th:case="'0'" id="but-box">
						<p id="pbq">等待启动</p>
						<p id="pbq2" th:onclick="'javascript:cancel(\''+${mes.orderId}+'\');'">取消订单</p>
					</div>
					<p th:case="'1'">申请恢复</p>
					<p th:case="'2'" id="pbq">正在学习</p>
					<p th:case="'3'" id="pbq"
					th:onclick="'javascript:type3(\''+${mes.orderId}+'\');'">确认付款</p>
					<p th:case="'4'" id="pbq" class="showModal" 
					th:onclick="'javascript:type4(\''+${mes.orderId}+'\');'">添加评论</p>
					<p th:case="'6'" id="pbq">已完成</p>
				</div>
			</div>
			<div th:if="${role} eq '2'">
				<div id="butt" th:switch="${mes.orderState}">
					<div th:case="'0'" >
						<p id="pbq" th:onclick="'javascript:type1(\''+${mes.orderId}+'\');'">启动课程</p>
						<p id="pbq2" th:onclick="'javascript:cancel(\''+${mes.orderId}+'\');'">取消订单</p>
					</div>
					<p th:case="'1'">申请恢复</p>
					<p th:case="'2'" id="pbq"
					th:onclick="'javascript:type2(\''+${mes.orderId}+'\');'">授课完成</p>
					<p th:case="'3'" id="pbq">等待学员付款</p>
					<p th:case="'4'">等待学员评价</p>
					<p th:case="'6'" id="pbq">已完成</p>
				</div>
			</div>
		</div>
		
		</div>
		<input type="hidden" id="statei" th:value="${newOrderShowState}"/>
		<input type="hidden" id="useri" th:value="${userId}" />
		<!-- <input type="hidden" id="butType" value="5" /> -->
		<input type="hidden" id="oi" value="19880" />
		<!--模态窗口-->
		<div id="modal" class="modal">
		    <div class="modal-dialog animated">
		        <div class="modal-content">
		                <div class="modal-header">
		                    <strong>谢谢您对YOGA的支持，请对此次服务做评价</strong>
		                </div>
		                <div class="modal-body">
		                    <div class="form-group">
		                        <div class="input-group col-xs-7">
		                            <input type="text" id="comments" value="" />
		                        </div>
		                        <label>
								    <select id="myselect">
								        <option value="1">请为此次服务评分</option>
								        <option value="2">1</option>
								        <option value="3">2</option>
								        <option value="4">3</option>
								        <option value="5">4</option>
										<option value="6">5</option>
								    </select>
								</label>
		                    </div>
		                </div>
			
		                <div class="modal-footer">
		                    <button class="btn btn-default" type="button" onclick="modal.close();">取消</button>
		                    <button class="btn btn-primary" type="submit" onclick="okComment()">确认</button>
		                </div>
		        </div>
		    </div>
		</div>
		<script src="/chat/js/xiala.js"></script>
		<script src="/chat/js/orders.js"></script>
		<script src="/chat/js/jquery-3.4.1.min.js"></script>
	</body>
</html>
